import React, { Component } from 'react';
import { connect } from 'dva';
import './reply.less';
import { Table, Divider, Tag, Icon, Checkbox, Button, Input } from 'antd';
import 'antd/dist/antd.css';
import { _selectMe } from '@/api/infoapi';
import { CheckboxChangeEvent } from '_antd@3.26.20@antd/lib/checkbox';
import Link from 'umi/link';
import moment from 'moment';
const { Search } = Input;
// interface Ilist {
//   id: string;
//   name: string;
//   parentId: string;
//   children: null;
// }
const columns = [
  {
    title: '名字',
    dataIndex: 'name',
    key: 'name',
    render: (
      text: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined,
    ) => <a>{text}</a>,
  },
  {
    title: '专业',
    dataIndex: 'majorName',
    key: 'majorName',
  },
  {
    title: '版本号',
    dataIndex: 'stationVersion',
    key: 'stationVersion',
  },
  {
    title: '技能数量',
    dataIndex: 'skillNum',
    key: 'skillNum',
  },
  {
    title: '作者',
    dataIndex: 'userName',
    key: 'userName',
  },
  {
    title: '发起时间',

    key: 'createTime',
    // dataIndex: moment("createTime").format('YYYY-MM-DD '),
    render: (record: any) => {
      return moment(record.createTime).format('YYYY-MM-DD ');
    },
  },

  {
    title: '状态',
    key: 'action',
    render: (
      text: any,
      record: {
        name:
          | string
          | number
          | boolean
          | {}
          | React.ReactElement<any, string | React.JSXElementConstructor<any>>
          | React.ReactNodeArray
          | React.ReactPortal
          | null
          | undefined;
      },
    ) => <span>已发布</span>,
  },
  {
    title: '操作',
    key: 'stationId',
    render: () => (
      <span>
        <Icon type="eye" />
      </span>
    ),
  },
];

const mapStateToProps = (state: { app: any }, ownProps: any) => {
  return state.app;
};
@connect(mapStateToProps)
class Reply extends Component {
  state = {
    states: ["全部",'未进行', '进行中', '已完成'],
    // selectStationForm: [], //表格数据，
    selectStationLabel: [], //筛选数据
    ind: 0,
    ind1: 0,
  };
  render() {
    let { selectStationLabel } = this.props;
    // console.log(selectStationLabel,'selectStationLabel');
    let { selectStationForm } = this.props;
    console.log(selectStationForm, 'selectStationForm');

    // let { selectStationForm } = this.state;
    // console.log(selectStationForm,"表格数据");
    let { states } = this.state;
    let { ind, ind1 } = this.state;
    return (
      <div className="re_station_box">
        <div className="re_station_nav">
          <div className="re_station_nav_major">
            <div className="one">
              <div className="major">专业:</div>
              <div>
                <span>全部</span>
                {selectStationLabel &&
                  selectStationLabel.map(
                    (
                      item: {
                        name:
                          | boolean
                          | React.ReactChild
                          | React.ReactFragment
                          | React.ReactPortal
                          | null
                          | undefined;
                      },
                      index: React.Key | null | undefined,
                    ) => {
                      return (
                        <span
                          key={index}
                          className={ind1 == index ? 'active1' : ''}
                          onClick={() => {
                            this.getfilter1(item.id, index);
                          }}
                        >
                          {item.name}
                        </span>
                      );
                    },
                  )}
              </div>
            </div>
            <div className="two">
              <p>状态：</p>
              <div>
                {states &&
                  states.map((item, index) => {
                    return (
                      <span
                        key={index}
                        className={ind == index ? 'active' : ''}
                        onClick={() => {
                          this.getfilter(index);
                        }}
                      >
                        {item}
                      </span>
                    );
                  })}
              </div>
            </div>
          </div>
        </div>
        {/* 表格部分 */}
        <div className="re_station_main">
          <div className="re_tableHeader">
            <div className="search">
              <Search
                placeholder="搜索岗位"
                onSearch={value1 => {
                  this.changeFilter(value1);
                }}
                style={{ width: 200 }}
                // value={this.state.value}
              />
            </div>
            <Button type="primary">
              <Link to="/addpage">+ 新增岗位</Link>
            </Button>
          </div>
          <Table columns={columns} rowKey="stationId" dataSource={selectStationForm} />
        </div>
      </div>
    );
  }
  componentDidMount() {
    this.props.dispatch({ type: 'app/selectStationLabel' });
    this.props.dispatch({ type: 'app/selectStationForm' });
  }
  async changeFilter(value: CheckboxChangeEvent) {
    let res = await _selectMe({
      isAsc: 'desc',
      pageNum: 1,
      pageSize: 10,
      searchTitle: value,
      majorId: '',
      status: '',
      isMyInfo: false,
      proName: '',
    });
    // console.log(res.data.rows,"筛选");
    if (value != null) {
      // this.setState({
      //   selectStationForm: res.data.rows,
      // });
      this.props.dispatch({ type: 'app/selectStationForm', action: res.data.rows });
    } else {
      this.setState({
        selectStationForm: this.props.selectStationForm,
      });
    }
  }

  //多选框  看我的
  async onChangetab(this: any, e: { target: { checked: any } }) {
    // console.log(`checked = ${e.target.checked}`,"仅看我的");
    let res = await _selectMe({
      isAsc: 'desc',
      pageNum: 1,
      pageSize: 10,
      searchTitle: '',
      majorId: '',
      status: '',
      isMyInfo: true,
      proName: '',
    });
    console.log(res.data.rows, '仅看我的');
    console.log(e.target.checked);

    if (e.target.checked) {
      // this.setState({
      //   selectStationForm: res.data.rows,
      // });
      this.props.dispatch({ type: 'app/selectStationForm', action: res.data.rows });
    } else {
      this.setState({
        selectStationForm: this.props.selectStationForm,
      });
    }
  }
  //点击转业筛选
  async getfilter(ind: any) {
    console.log(ind);

    this.setState({
      ind,
    });
    let res = await _selectMe({
      isAsc: 'desc',
      pageNum: 1,
      pageSize: 10,
      searchTitle: '',
      majorId: '',
      status: ind,
      isMyInfo: false,
      proName: '',
    });
    console.log(res.data.rows, '点击搜索');
    if (ind) {
      // this.setState({
      //   selectStationForm: res.data.rows,
      // });
      this.props.dispatch({ type: 'app/selectStationForm', action: res.data.rows });
    } else {
      this.setState({
        selectStationForm: this.props.selectStationForm,
      });
    }
  }
  async getfilter1(ind: any, index) {
    console.log(ind, index);

    this.setState({
      ind1: index,
    });
    let res = await _selectMe({
      isAsc: 'desc',
      pageNum: 1,
      pageSize: 10,
      searchTitle: '',
      majorId: ind,
      status: '',
      isMyInfo: false,
      proName: '',
    });
    console.log(res.data.rows, '点击搜索');
    if (ind) {
      // this.setState({
      //   selectStationForm: res.data.rows,
      // });
      this.props.dispatch({ type: 'app/selectStationForm', action: res.data.rows });
    } else {
      this.setState({
        selectStationForm: this.props.selectStationForm,
      });
    }
  }
}
export default Reply;
